<template>
  <view class="container">
    <!-- 用户信息区域 -->
    <view class="user-info">
      <view class="avatar-info">
        <image
          class="avatar"
          :src="userInfo.avatar || '/static/default-avatar.png'"
          mode="aspectFill"
        ></image>
        <view class="info">
          <text class="nickname">{{ userInfo.nickname || "未登录" }}</text>
          <text class="phone">{{ userInfo.phone || "点击登录" }}</text>
        </view>
      </view>
      <view class="user-stats">
        <view class="stat-item" @click="navigateTo('/pages/user/orders')">
          <text class="number">{{ userInfo.orderCount || 0 }}</text>
          <text class="label">我的订单</text>
        </view>
        <view class="stat-item" @click="navigateTo('/pages/user/favorites')">
          <text class="number">{{ userInfo.favoriteCount || 0 }}</text>
          <text class="label">我的收藏</text>
        </view>
        <view class="stat-item" @click="navigateTo('/pages/user/coupons')">
          <text class="number">{{ userInfo.couponCount || 0 }}</text>
          <text class="label">优惠券</text>
        </view>
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-list">
      <view class="menu-group">
        <view class="menu-item" @click="navigateTo('/pages/user/orders')">
          <image
            class="icon"
            src="/static/icons/order.png"
            mode="aspectFit"
          ></image>
          <text class="title">我的订单</text>
          <text class="arrow">></text>
        </view>
        <view class="menu-item" @click="navigateTo('/pages/user/favorites')">
          <image
            class="icon"
            src="/static/icons/favorite.png"
            mode="aspectFit"
          ></image>
          <text class="title">我的收藏</text>
          <text class="arrow">></text>
        </view>
        <view class="menu-item" @click="navigateTo('/pages/user/coupons')">
          <image
            class="icon"
            src="/static/icons/coupon.png"
            mode="aspectFit"
          ></image>
          <text class="title">优惠券</text>
          <text class="arrow">></text>
        </view>
      </view>

      <view class="menu-group">
        <view class="menu-item" @click="navigateTo('/pages/user/address')">
          <image
            class="icon"
            src="/static/icons/address.png"
            mode="aspectFit"
          ></image>
          <text class="title">收货地址</text>
          <text class="arrow">></text>
        </view>
        <view class="menu-item" @click="navigateTo('/pages/user/feedback')">
          <image
            class="icon"
            src="/static/icons/feedback.png"
            mode="aspectFit"
          ></image>
          <text class="title">意见反馈</text>
          <text class="arrow">></text>
        </view>
        <view class="menu-item" @click="navigateTo('/pages/user/settings')">
          <image
            class="icon"
            src="/static/icons/settings.png"
            mode="aspectFit"
          ></image>
          <text class="title">设置</text>
          <text class="arrow">></text>
        </view>
      </view>
    </view>

    <!-- 退出登录按钮 -->
    <view class="logout-btn" @click="logout" v-if="userInfo.isLogin">
      退出登录
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        avatar: "/static/default-avatar.png",
        nickname: "张三",
        phone: "138****8888",
        orderCount: 3,
        favoriteCount: 5,
        couponCount: 2,
        isLogin: true,
      },
    };
  },
  onShow() {
    // 页面显示时获取用户信息
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      // 这里应该调用接口获取用户信息
      // this.$api.getUserInfo().then(res => {
      //     this.userInfo = res.data;
      // });
    },
    navigateTo(url) {
      if (!this.userInfo.isLogin) {
        uni.navigateTo({
          url: "/pages/login/login",
        });
        return;
      }
      uni.navigateTo({
        url: url,
      });
    },
    logout() {
      uni.showModal({
        title: "提示",
        content: "确定要退出登录吗？",
        success: (res) => {
          if (res.confirm) {
            // 这里应该调用退出登录接口
            // this.$api.logout().then(() => {
            //     this.userInfo = {
            //         isLogin: false
            //     };
            // });
            this.userInfo = {
              isLogin: false,
            };
            uni.showToast({
              title: "已退出登录",
              icon: "success",
            });
          }
        },
      });
    },
  },
};
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.user-info {
  background-color: #007aff;
  padding: 40rpx 30rpx;
  color: #fff;

  .avatar-info {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;

    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      margin-right: 20rpx;
      border: 4rpx solid rgba(255, 255, 255, 0.3);
    }

    .info {
      .nickname {
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
        display: block;
      }

      .phone {
        font-size: 28rpx;
        opacity: 0.8;
      }
    }
  }

  .user-stats {
    display: flex;
    justify-content: space-around;

    .stat-item {
      text-align: center;

      .number {
        font-size: 36rpx;
        font-weight: bold;
        display: block;
        margin-bottom: 10rpx;
      }

      .label {
        font-size: 24rpx;
        opacity: 0.8;
      }
    }
  }
}

.menu-list {
  margin-top: 20rpx;

  .menu-group {
    background-color: #fff;
    margin-bottom: 20rpx;

    .menu-item {
      display: flex;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1rpx solid #f5f5f5;

      &:last-child {
        border-bottom: none;
      }

      .icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 20rpx;
      }

      .title {
        flex: 1;
        font-size: 30rpx;
        color: #333;
      }

      .arrow {
        font-size: 28rpx;
        color: #999;
      }
    }
  }
}

.logout-btn {
  margin: 40rpx 30rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background-color: #fff;
  color: #ff6b6b;
  font-size: 32rpx;
  border-radius: 44rpx;
}
</style> 